<!-- 表格 -->
<template>
  <div class="table">
    <h4 v-html="name"></h4>
    <table height="160px" border style="width: 160px">
      <tr>
        <td>名称</td>
        <td>{{ rowlist.Name }}</td>
      </tr>
      <tr>
        <td>闸把位置</td>
        <td>{{ rowlist.HandleLocation }}</td>
      </tr>
      <tr>
        <td>速度</td>
        <td>{{ rowlist.Speed }}</td>
      </tr>
      <tr>
        <td>电流</td>
        <td>{{ rowlist.An }}</td>
      </tr>
      <tr class="status" style="position: relative">
        <td>状态</td>
        <td>{{WarningLevel[rowlist.WarningLevel]}}</td>
        <div class="alarmHalo" :class="{
            'alarmHalo-normal': rowlist.WarningLevel == 0,
            'alarmHalo-warning': rowlist.WarningLevel == 1,
            'alarmHalo-danger': rowlist.WarningLevel == 2,
          }">
          <div class="animate" style="postion: relative; top:0px; left: 200px">
            <div class="w1"></div>
            <div class="w2"></div>
          </div>
        </div>
      </tr>
      <tr>
        <td>消息</td>
        <td>{{ rowlist.WarningMessage }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
  export default {
    props: ["name", "rowlist"],
    data() {
      return {
        WarningLevel: ['正常', '预警', '报警']
      };
    },
    created() {},
  };

</script>


<style lang="scss" scoped>
  .table {
    h4 {
      text-align: center;
      padding: 0px;
      color: #ffffff;
      font-size: 16px;
      background-color: transparent !important;
      font-weight: 100;
      margin: 5px 0px;
    }
  }

  table {
    background: none;
    border: none;
    border-radius: 6px;
    text-align: center;
    color: #5fc2b3;
    border-color: #3e54cd;
    border: none;
    padding: 2px 0 !important;
    text-align: center;
    border: 1px solid #5fc2b3;
    background-color: #24406c;

    .status {
      .alarmHalo {
        position: absolute;
        right: 52px;
        bottom: 64px;
      }
    }
  }

  table tr {
    font-size: 12px;
  }

</style>
